<!-- @format -->

<!--
 - MineAdmin is committed to providing solutions for quickly building web applications
 - Please view the LICENSE file that was distributed with this source code,
 - For the full copyright and license information.
 - Thank you very much for using MineAdmin.
 -
 - @Author X.Mo<root@imoi.cn>
 - @Link   https://gitee.com/xmo/mineadmin-vue
-->
<template>
	<div class="flex justify-between home-page-title">
		<div class="ma-content-block rounded-sm flex justify-between w-full p-3">
			<div class="pl-0 flex inline-block">
				<img src="/public/homeLogo.svg" />
			</div>
			<div class="datetime ml-5 flex">
				<!-- <span
					v-for="(item, index) in tags"
					::key="index"
					@click="changeTime(index)"
					:class="{ active: index == currentTag }"
				>
					{{ item }}
				</span>
				<a-range-picker
					style="width: 268px"
					v-model="rangeValue"
					@change="onChange"
				>
					<span
						@click="changeTime(tags.length)"
						:class="{ active: currentTag == tags.length }"
					>
						自定义
					</span>
				</a-range-picker> -->
				<p>{{ day }}</p>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { ref, onMounted, inject } from "vue";
	import dayjs from "dayjs";

	const day = ref(null);

	onMounted(() => {
		showTime();
	});
	// 标签
	const tags = ref(["今日", "本周", "本月", "本年"]);
	// 当前标签
	const currentTag = ref(0);
	// 提供的标题数据
	const homeTimeText = inject("homeTimeText");
	// 选中的时间
	const rangeValue = inject("rangeValue");
	// 当前时间
	const newDate = new Date();
	// 当年
	const newYear = newDate.getFullYear();
	// 当月
	const newMonth = newDate.getMonth() + 1;
	// 今天
	const newDay = newDate.getDate();
	// 本月天数
	const newMaxDay = new Date(newYear, newMonth, 0).getDate();
	// 本周一的日期
	const newMonday = new Date(
		newDate.setDate(newDate.getDate() - newDate.getDay() + 1)
	).getDate();
	// 本周日的日期
	const newSunday = new Date(newDate.setDate(newDate.getDate() + 6)).getDate();

	const changeTime = (index) => {
		currentTag.value = index;
		if (index !== tags.value.length) {
			homeTimeText.value = tags.value[index];
			initTime(index);
			return;
		}
	};

	const onChange = (e) => {
		homeTimeText.value = rangeValue.value.join("至");
	};

	const initTime = (index) => {
		switch (index) {
      // 本周
			case 1:
				rangeValue.value[0] = `${newYear}-${newMonth}-${newMonday}`;
				rangeValue.value[1] = `${newYear}-${newMonth}-${newSunday}`;
				break;
      // 本月
			case 2:
				rangeValue.value[0] = `${newYear}-${newMonth}-01`;
				rangeValue.value[1] = `${newYear}-${newMonth}-${newMaxDay}`;
				break;
      // 本年
			case 3:
				rangeValue.value[0] = `${newYear}-01-01`;
				rangeValue.value[1] = `${newYear}-12-31`;
				break;
      // 默认 今日
			default:
				
			console.log(rangeValue.value)
				rangeValue.value[0] = `${newYear}-${newMonth}-${newDay}`;
				rangeValue.value[1] = `${newYear}-${newMonth}-${newDay}`;
				break;
		}
	};

	const showTime = () => {
		day.value = dayjs().format("YYYY年MM月DD日");
	};
</script>

<style scoped lang="less">
	.home-page-title {
		height: 96px;
		align-items: center !important;

		img {
			height: 30px;
		}

		.datetime {
			align-items: center;

			p {
				font-size: 20px;
				color: #415b73;
				margin-left: 20px;
				font-style: italic;
			}

			span {
				width: 64px;
				border-radius: 32px;
				padding: 4px 0;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 20px;
				color: #00a0e9;
				border: 1px solid #00a0e9;
				cursor: pointer;

				&.active {
					background: #00a0e9;
					color: #fff;
				}
			}
		}
	}
</style>
